﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>职称设置</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/element-plus/dist/index.full.min.js"></script>
    <style>
        /* 可以添加一些自定义样式 */
        .page-container {
            margin-top: 20px;
            display: flex;
            justify-content: center;
        }

        body {
            background-color: #FFFFCC;
        }
        .caozuo{
            margin: 5px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div>您正在做的业务是：人力资源--权限管理--添加用户</div>
        <div calss ="caozuo">
            <button v-on:click="Add">保存</button> &nbsp;&nbsp;
            <button v-on:click="Fan">返回</button>
        </div>
        <table>
            <tr>
                <td>用户名称：</td>
                <td width="400px"><el-input v-model="name"></el-input></td>
                <td>用户密码：</td>
                <td width="400px"><el-input type="password" show-password v-model="pwd"></el-input></td>
            </tr>
            <tr>
                <td>真实姓名：</td>
                <td><el-input v-model = "zsname"></el-input></td>
                <td>用户身份：</td>
                <td>
                    <el-select v-model="roles"
                               placeholder="Select"
                               size="large"
                               style="width: 180px">
                        <el-option v-for="item in op"
                                   :key="item.value"
                                   :label="item.rolesName"
                                   :value="item.rolesID" />
                    </el-select>
                </td>
            </tr>
        </table>
    </div>
    <script>
          const { createApp, ref, onMounted } = Vue;

          const app = createApp({
            setup() {

                const name = ref('')
                const zsname = ref('')
                const pwd = ref('')

                const op = ref([])
                const roles = ref()
                function xlk(){
                    axios.get("/User_Manage/select_r")
                    .then(res=>{
                        console.log(res.data.zhi)
                        op.value = res.data.zhi
                    })
                }
                xlk()

                function Fan(){
                    window.location.href = `/User_Manage/Index`
                }

                function Add(){
                  axios.get("/User_Manage/AddUR",{
                    params: {
                        name:name.value,
                        zsname:zsname.value,
                        pwd:pwd.value,
                        roles:roles.value
                    }
                  })
                  .then(res=>{
                    ElementPlus.ElMessage.success('添加成功');
                    setTimeout(() => {
                        Fan();
                      }, 1000);
                  })
                  .catch(err=>{
                    ElementPlus.ElMessage.error('添加失败，请重试');
                    console.log("添加失败:"+err);
                  })
                }

                return {
                    op,
                    roles,
                    Fan,
                    Add,
                    name,
                    zsname,
                    pwd,
                }
            }
          });

          app.use(ElementPlus);
          app.mount('#app');
    </script>
</body>
</html>
